<template>
    <div class="login-box">
        <div class="imger-box">
            <img src="../assets/imger/login_img.png" alt="">
        </div>
        <div class="form-box">
            <div class="form-imger">
                <img src="../assets/imger/login_logo.png" alt="">
            </div>
            <div class="text-box">
                电商后台管理系统
            </div>
            <el-form ref="formref" :model="formCheck" :rules='checkRules'>
                <!-- prop对应data中定义的校验规则 -->
                <el-form-item prop="username">  
                    <!-- prefix-icon为elementui input组件提供的输入头部标签属性 -->
                    <el-input  placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="formCheck.username"></el-input>
                </el-form-item>
                 <el-form-item prop="userpassword">
                    <el-input  placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="formCheck.password" show-password></el-input>
                </el-form-item>
                 <el-form-item >
                    <el-button type="primary" style="width:100%" @click="login" >登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    export default {
        name:'login',
        data(){
            return {
                //表单数据绑定
                formCheck: {
                    username: 'admin',
                    password: '123456'
                },
                //表单校验规则
                checkRules:{
                    username: [  //校验规则的名字必须与上面表单数据名字一样才有效果
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password:  [
                        { required: true, message: '请输入用户密码', trigger: 'blur' },
                        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods:{
            //axios请求是基于promise的，可以用async  await 修饰
            login(){
                //elementui给form表单对象提供了一个validate方法，表单验证通过与否来决定是否发送请求
                this.$refs.formref.validate(async canlogin => {
                    if(!canlogin){
                       return ;
                    }
                    //表单校验成功后发送axios请求后台数据
                    const { data:res } = await this.$http.post('login',this.formCheck)
                    if( res.meta.status !==200 ){
                        this.$message.error('登录失败！');  //elementui提供的message提示信息
                        return ;
                    }
                    this.$message.success('登录成功！');  //elementui提供的message提示信息
                    //登录成功后把用户信息存到sessionstorage中
                    sessionStorage.setItem('userInfo',JSON.stringify(res))
                    this.$router.push('/home')
                })
            },
            //axios请求是基于promise的，可以用.then() .catch()获取响应结果
            logincheck(){
                this.$refs.formref.validate( canlogin => {
                    if(!canlogin){
                       return ;
                    }
                    //表单校验成功后发送axios请求后台数据
                    this.$http.post('login',this.formCheck)
                    .then( res => {
                        console.log(res)
                    })
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.login-box{
    background-color: #27AE60;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .form-box{
        width: 340px;
        height: 290px;
        background-color: white;
        padding: 50px;
        border-radius: 5px;
        box-sizing: border-box;
        position: relative;
        .form-imger{
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 3px solid #BBE6D6;
            text-align: center;
            position: absolute;
            top: -50px;
            left: 125px;
            background-color: white;
            padding-top: 7px;
            box-sizing: border-box;
            box-shadow: 1px 1px 3px 1px #ccc;
        }
        .text-box{
            height: 50px;
            line-height: 40px;
            text-align: center;
            color: #666;
        }
    }
    .imger-box{
        margin-right: 140px;
    }
}
</style>